<template>
	<view class="search-page">
		<view v-if="list.length > 0" class="search-box">
			<view class="goods-list">
				<view v-for="(good, key) in list" :key="key" class="goods-item" hover-class="hover" @click="onClickGoods(good)">
					<view class="goods-item-box d-f a-i-c">
						<view class="goods-name">{{good.name}}</view>
					</view>
					<view class="h-line line"></view>
				</view>
			</view>
		</view>
		<view v-else class="search-box">
			<view class="history-record d-f a-i-c">
				<view class="history-icon slw-icon">&#xe65f;</view>
				<view class="history-name">历史记录</view>
			</view>
			<view class="record-list">
				<view v-for="(good, key) in record" :key="key" class="record-item" hover-class="hover" @click="onClickGoods(good)">
					<view class="record-item-box d-f a-i-c">
						<view class="record-name">{{good.name}}</view>
					</view>
					<view class="h-line line"></view>
				</view>
			</view>
			<view class="h-line"></view>
			<view class="record-clear" hover-class="hover" @click="onClearRecord">
				<view class="clear-icon slw-icon">&#xe6a7;</view>
				<view class="clear-name">清空搜索记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {findIndex} from 'lodash'
	import lodash from '@/utils/lodash.js'
	import {STRATEGY_SEARCH_RECORD} from '@/config/storage.js'
	
	export default {
		data() {
			return {
				list: [],
				record: []
			}
		},
		onShow() {
			const info = uni.getStorageSync(STRATEGY_SEARCH_RECORD)
			this.record = info || []
		},
		onLoad() {
			uni.$on('change-search', (data) => {
				this.getList(data.name)
			})
		},
		onUnload() {
			uni.$off('change-search')
		},
		methods: {
			//	模糊查询获取中药材
			getList(name) {
				// getChineseMedicineList({name}).then(res => {
				// 	this.list = res.data
				// })
			},
			//	点击商品
			onClickGoods(good) {
				const {record} = this
				this.setRelationDrugInfo(good)
				// if (lodash.findIndex(record, ['id', good.id]) == -1) {
				// 	record.push(good)
				// 	uni.setStorageSync(STRATEGY_SEARCH_RECORD, record)
				// }
				this.$nextTick(() => {
					uni.navigateBack()
				})
			},
			//	清空记录
			onClearRecord() {
				this.record = []
				uni.removeStorageSync(STRATEGY_SEARCH_RECORD)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-page{
		/* #ifdef APP-PLUS */
		min-height: 100vh;
		/* #endif*/
		
		/* #ifndef APP-PLUS */
		min-height: calc(100vh - var(--window-top));
		/* #endif*/
		background-color: $theme_bg_color;
		.search-box{
			background-color: #fff;
			.hover{
				background-color: #efefef;
			}
			.record-list{
				.record-item:last-child{
					.line{display: none;}
				}
				.record-item-box{
					color: #666;
					height: 80rpx;
					padding: 0 20rpx;
					font-size: 32rpx;
				}
			}
			
			.goods-list{
				.goods-item:last-child{
					.line{display: none;}
				}
				.goods-item-box{
					color: #666;
					height: 80rpx;
					padding: 0 20rpx;
					font-size: 32rpx;
				}
			}
			
			.history-record{
				height: 80rpx;
				padding: 0 20rpx;
				.history-icon{
					color: $theme_color;
					margin-right: 20rpx;
				}
			}
			
			.record-clear{
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.clear-icon{
					color: $theme_color;
					margin-right: 20rpx;
				}
				.clear-name{
					color: #999;
				}
			}
		}
	}
</style>
